<div class="min-screen-full-height container relative" [class.is-night]="isNightTheme$|async"
     [class.over-modal]="isOverModel">
  <div nz-row class="min-screen-full-height" style="padding: 0 5%">
    <div nz-col [nzXXl]="10" [nzXl]="12" [nzLg]="0" [nzMd]="0" [nzSm]="0" [nzXs]="0"
         class="relative min-screen-full-height">
      <div class="absolute logo center">
        <img style="width: 48px" src="./assets/imgs/logo-color.svg" alt="ant">
        <span>AntDesignPro</span>
      </div>
      <div class="full-height flex-coloum center" style="align-items: flex-start">
        <div><img style="width: 50%" src="./assets/imgs/login1/login-box-bg.svg" alt="ant"></div>
        <div class="desc"><span>开箱即用的中后台管理系统</span></div>
        <div class="sub-desc"><span>输入您的个人详细信息开始使用！</span></div>
      </div>
    </div>
    <div nz-col [nzXXl]="14" [nzXl]="12" [nzLg]="24" [nzMd]="24" [nzSm]="24" [nzXs]="24"
         class="relative min-screen-full-height center">
      <div class="full-height flex-coloum center">
        <nz-card [nzBordered]="isOverModel" [class.is-night]="isNightTheme$|async">
          <ng-template appAd></ng-template>
        </nz-card>
      </div>
    </div>
  </div>

  <div class="absolute screen-full-width p-l-16 p-r-16" style="top: 16px" nz-row nzJustify="space-between">
    <div nz-col *ngIf="!isOverModel"></div>
    <div nz-col *ngIf="isOverModel">
      <img style="width: 32px" src="./assets/imgs/logo-color.svg" alt="ant">
      <span class="sp-16 m-l-8" style="color: white">AntDesignPro</span>
    </div>
    <div nz-col>
      <nz-switch
        (ngModelChange)="changeNight($event)"
        [ngModel]="isNightTheme$|async"
        [nzCheckedChildren]="checkedTemplate"
        [nzUnCheckedChildren]="unCheckedTemplate"
      ></nz-switch>
      <ng-template #checkedTemplate><img src="assets/imgs/login1/sun.svg" alt=""></ng-template>
      <ng-template #unCheckedTemplate><img src="assets/imgs/login1/moon.svg" alt=""></ng-template>
    </div>
  </div>
</div>
